<template>
	<view class="bg-or height-100">
		<view class="position-relative">
			<!-- images -->
			<template v-if="goodsInfos.imageUrlList?.length">
				<swiper class="goodsSwiper" circular @change="change">
					<block v-for="(item,index) in goodsInfos.imageUrlList" :key="index">
						<swiper-item>
							<image :src="item" class="goodsBannerImg" mode="aspectFit"></image>
						</swiper-item>
					</block>
				</swiper>
				<view class="position-absolute bottom right margin-bottom margin-right">
					<text
						class="text-sm color-white button text-center padding-lr padding-tb-xs radius-sl bg-black-qq">{{current}}/{{goodsInfos.imageUrlList?.length}}</text>
				</view>
			</template>
		</view>
		<!-- goods infos -->
		<view class="padding bg-white">
			<view class="flex-direction-row">
				<view class="flex-sub">
					<text class="text-lg color-black text-bold">{{goodsInfos.productName}}</text>
				</view>
				<view class="margin-left flex-direction-row align-center">
					<template v-if="goodsInfos.isCollection == 1">
						<text class="text-xsl iconfont color-red" @click="collection()">&#xe63b;</text>
					</template>
					<template v-else>
						<text class="text-xsl iconfont color-black-q" @click="collection()">&#xe613;</text>
					</template>
					<button class="button-none margin-left-sm" open-type="share">
						<uni-icons type="redo-filled" size="26"></uni-icons>
					</button>
				</view>
			</view>
			<view class="flex-direction-row justify-between margin-top-sm">
				<text class="text-sm color-black-b">规格：{{specs.name}}</text>
				<text class="text-sm color-black-b">月售 {{goodsInfos.actualSalesVolume || 0}}</text>
			</view>
			<view class="flex-direction-row justify-between margin-tb">
				<view class="flex-direction-row align-end">
					<text class="text-xs color-df text-bold">￥</text>
					<text class="text-xxl text-bold color-red" style="margin-bottom: -8rpx;">{{goodsInfos.price}}</text>
					<!-- <text class="text-smd color-black-q strike-through-text margin-left-sm">￥{{specs.costPrice}}</text> -->
					<!-- <text class="text-xs radius bg-tags color-df margin-left">9.6折</text> -->
				</view>
				<template v-if="goodsInfos.specsResList?.length > 1">
					<view class="bg-red radius-sl flex-direction-row align-center but" @click="selectSpecsOpen">
						<text class="text-smd iconfont color-white">&#xe727;</text>
						<text class="text-smd color-white margin-left-xs">选规格</text>
					</view>
				</template>
				<template v-else>
					<view class="bg-red radius-sl flex-direction-row align-center but" @click="addCarts" id="carts">
						<text class="text-smd iconfont color-white">&#xe727;</text>
						<text class="text-smd color-white margin-left-xs">加入购物车</text>
					</view>
				</template>
			</view>
			<view class="padding-top border-top" v-if="goodsInfos.tip">
				<view class="flex-direction-row align-center margin-top-xss">
					<text class="text-df iconfont color-black-q">&#xebe5;</text>
					<text class="text-xsm color-black-q margin-left-xs">{{goodsInfos.tip}}</text>
				</view>
			</view>
		</view>
		<!-- 用药指导 -->
		<view class="margin-top-sm bg-white padding flex-direction-row align-center" @click="taboo">
			<view class="" style="width: 76rpx;">
				<text class="text-smd">用药指导</text>
			</view>
			<view class="flex-direction-row flex-sub">
				<view class="flex-sub padding-lr-sm border-left">
					<view class="flex-direction-row align-center">
						<text class="text-smd">主治功能</text>
						<text class="text-xss color-black-b iconfont margin-left-sm">&#xe6f3;</text>
					</view>
					<text class="text-xsm color-black-q text-cut2">{{goodsInfos.indicativeFunction}}</text>
				</view>
				<view class="flex-sub padding-lr-sm border-left">
					<view class="flex-direction-row align-center">
						<text class="text-smd">用法用量</text>
						<text class="text-xss color-black-b iconfont margin-left-sm">&#xe6f3;</text>
					</view>
					<text class="text-xsm color-black-q">{{goodsInfos.dosageMethod}}</text>
				</view>
			</view>
			<view class="padding-left-sm border-left" style="width: 50rpx;">
				<text class="text-smd color-df">更多</text>
			</view>
		</view>
		<!-- 用药指导弹层 -->
		<uni-popup ref="taboo" type="bottom" :safe-area="false">
			<view class="bg-white radius-ltr flex-direction-column" style="height: 76vh;">
				<view class="position-relative">
					<view class="text-center padding">
						<text class="text-df text-bold">用药指导</text>
					</view>
					<view class="position-absolute top right padding" @click="closePopup">
						<text class="text-df iconfont">&#xe602;</text>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: calc(76vh - 80rpx);">
					<view class="padding">
						<view class="radius-xl bg-popup padding">
							<view class="flex-direction-row align-end margin-bottom">
								<text class="text-xsl color-popup">用药贴士</text>
								<text
									class="text-xsm color-popup margin-left margin-bottom-xs">专家医生编审|安全科学用药|助力医疗服务</text>
							</view>
							<uni-table border stripe emptyText="暂无更多数据" class="radius-xl">
								<!-- <uni-tr>
									<uni-th width="100" align="center">主治功能</uni-th>
									<uni-th align="center">Jeson</uni-th>
								</uni-tr> -->
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">主治功能</text></uni-td>
									<uni-td>{{goodsInfos.indicativeFunction}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">用法用量</text></uni-td>
									<uni-td>{{goodsInfos.dosageMethod}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">用药禁忌</text></uni-td>
									<uni-td>{{goodsInfos.taboo}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">特殊人群</text></uni-td>
									<uni-td>{{goodsInfos.specialPeople}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">储存条件</text></uni-td>
									<uni-td>{{goodsInfos.storageConditions}}</uni-td>
								</uni-tr>
							</uni-table>

						</view>
						<!-- 说明书 -->
						<view class="padding-tb-xl">
							<text class="text-xl">说明书</text>
						</view>
						<image :src="goodsInfos.instructionsUrl" style="width: 690rpx;" mode="widthFix"></image>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		productDetial
	} from "@/common/mall.js"
	export default {
		onLoad(option) {
			// console.log('option: ',option.item);
			console.log('option: ', option);
			if (option.id) {
				// 获取商品详情
				this.getDetail(option.id);
				this.goodsId = option.id
			} else {
				uni.showModal({
					title: '参数错误',
					showCancel: false
				});
			}
		},
		data() {
			return {
				goodsId: '',
				cartNum: 0,
				cartsStyle: {},
				position: 'absolute',
				TOP: -100,
				LEFT: -100,
				BUTLEFT: -50,
				transition: '',
				goodsInfos: {},
				specs: {},
				// goodsList: [],
				current: 1,
				selectSpecsId: '',
				productCount: 1,
				imageUrl: ''
			}
		},
		methods: {
			async getDetail(id) {
				const res = await productDetial(id);
				console.log('getDetail res: ', res);
				this.goodsInfos = res
				this.specs = res.specsResList[0]
				this.imageUrl = this.specs?.imageUrlList[0]
			},
			
			change(e) {
				console.log('e: ', e.detail.current);
				this.current = e.detail.current + 1
			},
			
			taboo() {
				this.$refs.taboo.open();
			},
			
		}
	}
</script>

<style scoped>
	.goodsSwiper {
		width: 750rpx;
		height: 750rpx;
		z-index: 1;
		overflow: hidden;
	}

	.goodsBannerImg {
		width: 750rpx;
		height: 750rpx;
	}

	.bg-tags {
		background-color: rgba(255, 238, 236, 1);
		padding: 6rpx 10rpx;
	}

	.specs-button {
		background: rgb(248, 248, 248);
		border: 1rpx solid #fff;
		width: 210rpx;
		margin-right: 18rpx;
		margin-top: 18rpx;
		color: #888;
	}

	.select-on {
		background-color: rgba(219, 64, 44, 0.06);
		border: 1rpx solid rgba(217, 55, 34);
		color: #d93722;
	}

	.bg-popup {
		background-color: #fffae6;
	}

	.color-popup {
		color: #ee7000;
	}

	.carts {
		position: fixed;
		left: -40rpx;
		bottom: 160px;
		width: 140rpx;
		height: 90rpx;
		/* padding-left: 20rpx; */
		transition: left .6s ease-in-out
	}

	.badeg {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		padding: 2rpx 8rpx;
		border: 3rpx solid #fff;
		/* transition: left .6s linear; */
	}

	.but {
		height: 30px;
		padding: 0 10px;
	}

	.cartsClass {
		width: 30px;
		height: 30px;
		position: fixed;
		border-radius: 50%;
		/* transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1) */
	}

	.cartsButtonClass {
		/* width: 50px;
		height: 50px;
		background-color: red;
		border-radius: 50%; */
		transition: left .6s linear
	}

	.bg-kf {
		background-color: rgba(255, 0, 0, 0.1);
	}
</style>